<template>
  <div class="content-detail">
    <div class="week-con">
      <el-tabs v-model="activeName" class="tabs_line" v-if="showTabs">
        <el-tab-pane label="季度总结" name="1"></el-tab-pane>
        <el-tab-pane label="考核登记表" name="2"></el-tab-pane>
      </el-tabs>
      <div class="form_tip_d" v-if="showTabs && showSumTips && activeName == '1' && summaryData.isWrite == '1'">
        <span class="form_tip" @click.stop="closeTip">
          提示：请公务员在季度总结完成后，按照规定要求，完善平时考核登记表。如暂时不方便，之后可再次进入页面填写。
          <i class="el-icon-close"></i>
        </span>
      </div>
      <div class="week_left_main" v-if="activeName == '1'">
        <!-- 本周/本月 -->
        <div class="title_main_one" v-if="recordType == '01-02' || recordType == '01-01'">
          {{ recordType == '01-01' ? '本周工作纪实' : '本月工作小结' }}
        </div>
        <div class="one_week_box m-b-1" v-if="recordType == '01-02' || recordType == '01-01'">
          <div v-if="formData.workConList">
            <div v-for="(item, index) in formData.workConList" :key="item.id">
              <div class="one_week">
                <div class="one_week_content2">
                  <span class="m-r-10">{{ index + 1 }}</span>
                  {{ item.workContent }}
                </div>
                <div class="one_week_content1">{{ item.workTag }}</div>
                <div class="one_week_content3">
                  <i
                    :class="[
                      item.finishStatus == '1' ? 'el-icon-success' : 'el-icon-time',
                      item.finishStatus == '1' ? 'color_y' : 'color_b',
                    ]"></i>
                  {{ item.finishStatus == '1' ? '已完成' : '进行中' }}
                </div>
                <div class="one_week_content4">{{ item.workClassifyName }}</div>
              </div>
            </div>
          </div>
          <div class="pre_line" v-html="removeHtmlStyle(formData.workCon)"></div>
        </div>
        <!-- 下周/下月 -->
        <div class="title_main_one" v-if="recordType == '01-02' || recordType == '01-01'">
          <th>{{ recordType == '01-01' ? '下周工作计划' : '下月工作计划' }}</th>
        </div>
        <div class="one_week_box m-b-1" v-if="recordType == '01-02' || recordType == '01-01'">
          <div v-if="formData.planConList && (formData.planConList.length || formData.planCon)">
            <div v-for="(item, index) in formData.planConList" :key="item.id">
              <div class="one_week">
                <span class="m-r-10">{{ index + 1 }}</span>
                <div class="one_week_content5">{{ item.workContent }}</div>
                <div class="one_week_content1">{{ item.workTag }}</div>
                <div class="one_week_content4">{{ item.workClassifyName }}</div>
              </div>
            </div>
            <div class="pre_line" v-html="removeHtmlStyle(formData.planCon)"></div>
          </div>
          <div v-else>暂无数据</div>
        </div>

        <div class="board_list" v-for="(item, index) in allData" :key="index">
          <EntrySound :listData="item" :entry="false"></EntrySound>
        </div>

        <div class="title_main_one">问题建议</div>
        <div>
          <div class="szsy_box_main" v-if="formData.proConList.length > 0">
            <div v-for="item in formData.proConList" :key="item.id">
              <div class="arrract_one_main">
                <div class="attract_share_content" v-html="removeHtmlStyle(item.proCon)"></div>
                <div class="mar_upload" v-if="item.proFileList.length > 0">
                  <UploadPreview :file-list="item.proFileList" layout="list"></UploadPreview>
                </div>
              </div>
            </div>
          </div>
          <div class="attract_share_content" v-else>暂无数据</div>
        </div>

        <div class="title_main_one">图片/视频/附件</div>
        <div class="img_box">
          <UploadPreview :file-list="formData.recordFileList" layout="list"></UploadPreview>
        </div>
        <div class="evaluate" v-if="['01-01', '01-02', '01-03'].includes(recordType)">
          <div class="evaluate_back" v-if="formData.suggest && formData.isSuggest == '0'">
            <p class="list_text_p">纪实回复</p>
            <div class="input_div_suggest">
              <p class="input_desc">{{ formData.suggest }}</p>
            </div>
          </div>
          <template v-if="formData.isSuggest == '1' || formData.isReturn == '1'">
            <div class="evaluate_back" v-if="formData.isSuggest == '1'">
              <p class="list_text_p">纪实回复</p>
              <div class="input_div">
                <el-input
                  type="textarea"
                  v-model="formData.suggest"
                  :rows="5"
                  maxlength="128"
                  show-word-limit></el-input>
              </div>
            </div>
            <div class="foot_btn input_div">
              <el-button type="primary" @click="backSubmit(2)" v-if="formData.isSuggest == '1'">提 交</el-button>
              <el-button type="warning" @click="backDialogShow(1)" v-if="formData.isReturn == '1'">退回修改</el-button>
            </div>
          </template>
        </div>
      </div>
      <QuaterSummary
        ref="quaterSum"
        class="board_summary"
        :summaryData="summaryData"
        :userType="userType"
        v-else-if="activeName == '2'" />
    </div>

    <XnDialog custom-class="branch_dialog" title="退回原因" :visible.sync="returnShow" @close="returnShow = false">
      <el-input
        placeholder="请输入"
        type="textarea"
        v-model="backReason"
        size="small"
        :rows="8"
        maxlength="128"
        show-word-limit></el-input>
      <div class="dialog-box_bottom">
        <el-button size="small" @click="returnShow = false">取 消</el-button>
        <el-button type="primary" size="small" @click="backSubmit(1)">确定</el-button>
      </div>
    </XnDialog>
  </div>
</template>

<script>
import QuaterSummary from './QuaterSummary'
import EntrySound from '../components/EntrySound'
import UploadPreview from '@com/UploadPreview/index.vue'
import XnDialog from '@com/xnDialog.vue'
import { getFormByNoteId, saveReturn, saveSuggest } from '@apis/board.js'
export default {
  name: 'WriteContentWeek',
  components: { QuaterSummary, EntrySound, UploadPreview, XnDialog },
  props: {
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // 考核登记表
      activeName: '1',
      summaryData: {},
      showTabs: false,
      showSumTips: true,
      allData: [],
      formData: {
        userInfoVO: {},
        isPublic: '',
        title: '',
        workCon: '', // 本月工作小结
        planCon: '', // 重点任务完成情况
        workConList: [], // 条目化本周
        planConList: [], // 条目化下周
        recordFileList: [], // 附件
        proConList: [], // 问题建议
        suggest: '', // 领导给的回复
        isReply: '', // 意见回复
      },
      // 退回原因弹框显示
      returnShow: false,
      backReason: '',
      userType: '1-1', // 用户类型 1-1非领导成员公务员 1-2领导成员公务员  1-3曾经担任领导职务人员和享受非领导职务待遇人员"
      recordType: '',
    }
  },
  watch: {
    info: {
      handler(news) {
        if (news.recordId) {
          this.initData()
        }
      },
    },
  },
  computed: {},
  created() {
    this.recordType = this.$route.query.recordType
    switch (this.recordType) {
      case '01-02':
        // 月小结
        this.allData = [
          {
            id: 'politicsCon',
            title: '政治表现及政治学习情况',
            entryCont: '政治表现及政治学习情况',
          },
          {
            title: '工作亮点及创新情况',
            entryCont: '工作亮点及创新情况',
            id: 'innovateCon',
          },
          {
            title: '主要不足及具体事例',
            entryCont: '主要不足及具体事例',
            id: 'lackCon',
          },
          {
            title: '奖惩情况',
            entryCont: '奖惩情况',
            id: 'rpCon',
          },
        ]
        break
      case '01-03':
        // 科员季度自评
        this.allData = [
          {
            title: '本季度个人总结',
            entryCont: '',
            audioList: [],
            id: 'workCon',
            required: true,
          },
          {
            title: '教育培训情况',
            entryCont: '',
            audioList: [],
            id: 'eduCon',
          },
          {
            title: '奖惩情况',
            entryCont: '',
            audioList: [],
            id: 'rpCon',
            placeholder: '请输入奖惩情况',
          },
        ]
        break
      case '01-04':
        // 科室总结
        this.allData = [
          {
            title: '季度部门总结',
            entryCont: '',
            audioList: [],
            id: 'workContent',
          },
          {
            title: '重点任务完成情况',
            entryCont: '',
            audioList: [],
            id: 'taskAchievement',
          },
        ]
        break
      case 'DEAL_MAIN_QUARTER_NOTE':
        this.activeName = 2
        break
      default:
        this.allData = []
    }
  },
  mounted() {
    if (this.info) {
      this.initData()
    }
  },
  methods: {
    initData() {
      const data = this.info
      this.formData = Object.assign(this.formData, data)
      console.log('this.formData :>> ', this.formData)
      if (this.recordType === '01-03') {
        this.getPageFormByNoteId()
        this.allData[0].entryCont = data.workCon
        this.allData[0].audioList = data.workAudioList
        this.allData[1].entryCont = data.eduCon
        this.allData[1].audioList = data.eduAudioList
        this.allData[2].entryCont = data.rpCon
        this.allData[2].audioList = data.rpAudioList
      } else {
        if (this.formData.formV1VO) {
          this.formData.workCon = this.formData.formV1VO.workCon
          this.formData.planCon = this.formData.formV1VO.planCon
          this.formData.recordFileList = this.formData.formV1VO.recordFileList
          this.formData.proConList = this.formData.formV1VO.proConList
          if (this.recordType === '01-02') {
            this.allData[0].entryCont = this.formData.formV1VO.politicsCon
            this.allData[1].entryCont = this.formData.formV1VO.innovateCon
            this.allData[2].entryCont = this.formData.formV1VO.lackCon
            this.allData[3].entryCont = this.formData.formV1VO.rpCon
          }
        }
        if (this.formData.formV2VO) {
          if (this.formData.formV2VO.workConList && this.formData.formV2VO.workConList.length) {
            this.formData.workConList = this.formData.formV2VO.workConList.filter(item => {
              return item.workContent
            })
          }
          if (this.formData.formV2VO.planConList && this.formData.formV2VO.planConList.length) {
            this.formData.planConList = this.formData.formV2VO.planConList.filter(item => {
              return item.workContent
            })
          }
          if (!this.formData.recordFileList.length) {
            this.formData.recordFileList = this.formData.formV2VO.recordFileList
          }
          if (!this.formData.proConList.length) {
            this.formData.proConList = this.formData.formV2VO.proConList
          }
        }
      }
    },
    getPageFormByNoteId() {
      getFormByNoteId({
        id: this.$route.query.id,
      }).then(res => {
        const data = res.data
        this.summaryData = {}
        if (data && Object.keys(data).length > 0) {
          this.showTabs = true
          this.summaryData = data
          this.activeName = '2'
          this.userType = '1-' + data.userCategory
          if (this.recordType === 'DEAL_MAIN_QUARTER_NOTE') {
            this.showTabs = false
          }
        }
      })
    },
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
    // 季度
    closeTip() {
      this.showSumTips = false
    },
    backDialogShow() {
      this.returnShow = true
    },
    backSubmit(type) {
      if (!this.formData.suggest && !this.backReason) {
        const str = type === 2 ? '请输入回复内容' : '请输入退回原因'
        return this.$message.warning(str)
      }
      if (type === '1') {
        this.returnBoard()
      } else {
        this.suggBoard()
      }
    },
    returnBoard() {
      saveReturn({
        noteId: this.$route.query.id,
        optionUserId: localStorage.pskh_userId,
        replayContent: this.backReason,
        tenantId: localStorage.pskh_tenantId,
        suggestionList: [],
      }).then(res => {
        if (res.code === 0) {
          this.$message({
            message: '退回成功',
            type: 'success',
          })
          this.$router.go(-1)
        }
      })
    },
    suggBoard() {
      saveSuggest({
        noteId: this.$route.query.id,
        optionUserId: localStorage.pskh_userId,
        replayContent: this.formData.suggest,
        tenantId: localStorage.pskh_tenantId,
        suggestionList: [],
      }).then(res => {
        if (res.code === 0) {
          this.$message({
            message: '提交成功',
            type: 'success',
          })
          this.$router.go(-1)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.content-detail {
  width: 100%;
  height: 100%;
  padding: 10px 20px;
  overflow-y: auto;
  .tabs_line {
    height: 52px;
    /deep/.el-tabs__header {
      margin: 0;
      padding: 0 10px;

      .el-tabs__nav-next,
      .el-tabs__nav-prev {
        line-height: 52px;
      }
    }
    /deep/.el-tabs__nav {
      display: flex;
      .el-tabs__active-bar {
        background-color: #409eff;
      }
      .el-tabs__item.is-active {
        color: #409eff;
      }
      .el-tabs__item {
        height: 52px;
        line-height: 52px;
        padding: 0 10px;
        &:hover {
          color: #409eff;
        }
      }
    }
  }
  .board_summary {
    width: 100%;
    padding: 20px;
    height: calc(100% - 120px);
    margin-bottom: 10px;
  }
  .form_tip_d {
    display: flex;
  }
  .form_tip {
    font-size: 16px;
    color: red;
    padding: 0 10px;
    margin-top: 10px;
    display: inline-block;
    cursor: pointer;
  }
  .week_left_main {
    padding: 10px 30px;
    height: calc(100% - 57px);
    .img_box {
      padding: 15px;
      background-color: #e9eff48f;
    }
    .title_main_one {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .one_week_box {
      font-size: 14px;
      line-height: 26px;
      color: #666666;
      width: 100%;
      padding: 10px;
      background-color: #e9eff48f;
      white-space: pre-wrap;
    }
    .one_week {
      display: flex;
      // align-items: center;
      margin-bottom: 6px;
      .one_week_content1 {
        width: 12%;
        padding-left: 10px;
      }
      .one_week_content2 {
        width: 67%;
        padding-right: 10px;
      }
      .one_week_content3 {
        width: 10%;
      }
      .one_week_content4 {
        width: 8%;
        text-align: right;
      }
      .one_week_content5 {
        width: 77%;
      }
      .color_y {
        color: #67c23a;
        font-size: 16px;
      }
      .color_b {
        color: #409eff;
        font-size: 16px;
      }
    }
    .attract_share_content {
      font-size: 14px;
      line-height: 26px;
      color: #666666;
      width: 100%;
      padding: 15px;
      background-color: #e9eff48f;
      margin-bottom: 10px;
      white-space: pre-line;
    }
  }
  .evaluate {
    background-color: #fff;
    .score_select {
      padding: 15px;
    }
  }
  .list_text_p {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    padding-right: 10px;
    margin: 10px 0;
  }
  .foot_btn {
    text-align: center;
    margin-top: 10px;
  }
  .input_div_suggest {
    font-size: 14px;
    line-height: 26px;
    color: #666666;
    width: 100%;
    padding: 15px;
    background-color: #e9eff48f;
    margin-bottom: 10px;
  }
  .input_div {
    font-size: 14px;
  }
}
.dialog-box_bottom {
  text-align: center;
  margin-top: 10px;
}
</style>
